import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 安装动画库插件 npm install animate.css --save
// 导入css动画库插件
import 'animate.css';


Vue.config.productionTip = false
// 1. 路由的钩子函数 分为全局钩子 和组件钩子 和独享的
// 路由守卫 监听用户路由操作
// 1)全局钩子函数有俩种
//  全局前置守卫 最常用！！！！！！
router.beforeEach((to, from, next) => {
  // to.name 路由名称  to.path to.query to.params 
  // to.meta  自定义的信息
  console.log(to, "即将进入的组件路由信息")

  // from.name  from.path from.query from.params 
  // from.meta
  console.log(from, "即将离开的组件")
  // 假如用户去视频管理模块
  if (to.name == 'Video') {
    // 判断用户是否登录
    if (!localStorage.token) {
      // 用户如果没登录拦截到 登录页面
      // 否则继续跳转
      //  next 可以作为跳转路由方法使用 类似push 
      next({ name: "login" })
    } else {
      next();
    }

  } else if (to.name == 'User') {// 假如去到用户页面tab切换 没有query传参id 不让跳转
    if (to.query.id) {
      next()
    } else {
      next(false)//&&&停在在当前页面 next(false) 
    }
  } else {
    next();
  }

})

// 全局后置守卫  
router.afterEach((to, from) => {
  console.log(to, "后置守卫====》即将进入的组件路由信息")
  console.log(from, "后置守卫====》即将离开的组件")
})


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
